<template>
    <el-container>
        <el-aside width="12%"></el-aside>
        <el-main>
            <el-alert v-if="reserved" v-bind:title="title1" type="success"
                        show-icon></el-alert>
            <el-alert v-if="!reserved" v-bind:title="title2" type="warning" show-icon></el-alert>
            <el-divider></el-divider>
            <!--栅格-->
            <canvas ref="canvas" id="canvas" width="962" height="527"></canvas>
            <el-divider></el-divider>

            <el-button type="primary" @click="$router.push('/reserve')" icon="el-icon-arrow-left">
                预约车位页面
            </el-button>
            <el-button type="success" @click="reserveUnlock">解锁预约车位</el-button>
            <el-button type="danger" @click="parking">停入车位（模拟传感器触发）</el-button>
            <el-button type="info" @click="$router.push('/pay')">缴费页面<i
                    class="el-icon-arrow-right el-icon--right"></i></el-button>
            <el-divider></el-divider>
        </el-main>
        <el-aside width="12%"></el-aside>
    </el-container>
</template>

<script>
import axios from 'axios'
export default {
    name: 'ShowPath',
    data() {
        return {
            reserved: null,
            reservedSpace: null,
            title1: "请按照引导路线停入4号车位（预约到期时间  ）",
            title2: "您未预约车位或预约已过期",
            vs: [
                // {"x": 478, "y": 450},
                // {"x": 478, "y": 384},
                // {"x": 478, "y": 318},
                // {"x": 218, "y": 318},
                // {"x": 218, "y": 264},
                // {"x": 138, "y": 264}
            ],//最短路径经过的所有节点
        }
    },
     methods: {
        getReserveInfo () {
            var that = this;
            axios.get("/park/reserveInfo").then(function (response) {
                if (response.data.flag) {
                    that.reservedSpace = response.data.res;
                    that.title1 = "请按照引导路线停入4号车位（预约到期时间" + that.reservedSpace.startTime + "）";
                } else {
                    that.title2 = "您未预约车位或预约已过期";
                    console.log("没有路径导航信息");
                }
                that.reserved = response.data.flag;
            }, function (err) {
                console.log(err);
            });
        },
        getShortestPath () {
            var that = this;
            axios.get("/park/path").then((response) =>  {
                var vs = response.data.res;
                if (vs != null) {
                    this.showShortestPath(vs);
                } else {
                    console.log("没有路径导航信息");
                }
                //alert(response.data.msg);
            }, (err) => {
                console.log(err);
            });
        },
        showMessage (type, message) {
            this.$message({
                message: message,
                type: type
            });
        },
        reserveUnlock () {//解锁预定
            if (this.reservedSpace == null) {
                this.showMessage('warning', "您未预定车位");
                return;
            }
            var that = this;
            axios({
                method: "post",
                url: "/park/reserveUnlock",
            }).then(
                function (response) {
                    if (response.data.flag) {
                        that.showMessage('success', response.data.msg);
                        //解锁车位成功时，把车位id存入localStorage，以便缴费时获取（不能在停入时存，因为停入是传感器触发的）
                        if (response.data.res?.id) {
                            localStorage.setItem('unlock_parkspace_id', response.data.res.id)
                        }
                    } else {
                        that.showMessage('warning', response.data.msg);
                    }
                }, function (err) {
                    console.log(err);
                }
            );
        },

        parking () {//停车
            if (this.reservedSpace == null) {
                this.showMessage('warning', "您未预定车位");
                return;
            }
            var that = this;
            axios({
                method: "post",
                url: "/park",
                params: {
                    id: this.reservedSpace.id,
                }
            }).then(
                function (response) {
                    if (response.data.flag) {
                        that.showMessage('success', response.data.msg);
                    }else{
                        that.showMessage('warning', response.data.msg);
                    }
                },
                function (err) {
                    console.log(err);
                }
            );
        },
        //画最短路径
        showShortestPath(vs) {
            //var clock = document.querySelector('#canvas');
            var clock = this.$refs.canvas;
            if (clock.getContext) {
                var ctx = clock.getContext('2d');
                ctx.save();
                ctx.strokeStyle = '#228B22';
                ctx.lineWidth = 10;
                ctx.beginPath();
                ctx.moveTo(vs[0].x, vs[0].y);//画笔移动到起点
                for (var i = 1; i < vs.length; i++) {
                    ctx.lineTo(vs[i].x, vs[i].y);//画下一个点之间的折线
                }
                ctx.stroke()
                //在倒数两个点之间画箭头
                drawArrow(ctx,
                    vs[vs.length - 2].x, vs[vs.length - 2].y,
                    vs[vs.length - 1].x, vs[vs.length - 1].y,
                    30, 30, 10, "#228B22");
                //drawArrow(ctx, 182, 217, 108, 217, 30, 30, 10, "#228B22");
                ctx.stroke()
            }

            //画箭头的函数
            function drawArrow(ctx, fromX, fromY, toX, toY, theta, headlen, width, color) {
                var theta = theta || 30,
                    headlen = headlen || 10,
                    width = width || 1,
                    color = color || '#000',
                    angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
                    angle1 = (angle + theta) * Math.PI / 180,
                    angle2 = (angle - theta) * Math.PI / 180,
                    topX = headlen * Math.cos(angle1),
                    topY = headlen * Math.sin(angle1),
                    botX = headlen * Math.cos(angle2),
                    botY = headlen * Math.sin(angle2);
                ctx.save();
                ctx.beginPath();
                var arrowX, arrowY;
                ctx.moveTo(fromX, fromY);
                ctx.lineTo(toX, toY);
                arrowX = toX + topX;
                arrowY = toY + topY;
                ctx.moveTo(arrowX, arrowY);
                ctx.lineTo(toX, toY);
                arrowX = toX + botX;
                arrowY = toY + botY;
                ctx.lineTo(arrowX, arrowY);
                ctx.strokeStyle = color;
                ctx.lineWidth = width;
                ctx.stroke();
                ctx.restore();
            }
        }
    },
    mounted() {
        console.log(this)
        //showShortestPath(vs);
        this.getReserveInfo();
        this.getShortestPath();

        setTimeout(function () {
            if (this.reserved) {
                this.getReserveInfo();
                this.getShortestPath();
            }
        }, 1 * 60 * 1000);
    }
}
</script>

<style scoped>
    .el-aside {
        background-color: whitesmoke;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 60px;
        padding-top: 0px;
        padding-bottom: 0px;
        overflow: hidden;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    /**/
    .el-row {
        margin-bottom: 20px;

     /* &
    :last-child {
        margin-bottom: 0;
    }  */

    }
    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        height: 150px;
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
    /*canvas*/
    #canvas {
        background-image: url("../static/img/park/park.png");
        width: 962px;
        height: 527px;
    }
</style>